<!-- html版本声明 用的html5标准 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--    元信息，和网页呈现无关但是是网页自身的一些属性定义。-->
    <meta charset="UTF-8">
    <title>这是一个欢迎的界面</title>
    <!--    链接一些外部的资源文件-->
    <link>
    <!--    在网页内编写js脚本，也可以引入一些外部的库-->
    <script></script>
    <!--    有些不支持script的浏览器，网页所作的处理-->
    <noscript></noscript>
    <!--    用于编写网页内的css样式-->
    <style></style>
</head>
<body>
欢迎使用springboot的视图层。
<header>
    顶部的块级元素
</header>
<!--一般只写一个main元素-->
<main> 主体信息元素
    <div> 这是sunnyFrame框架的学习</div>
    <p> 前端的技术栈 ：<span> vue </span> <span>pinia </span></p>
    <div>参考的资料文档：
        <a target="_blank" href="https://www.w3school.com.cn/">
            <img width="80px" src="logo.png"></img>
            <img src="https://www.w3school.com.cn//ui2019/logo-16-red.png"/>
            <span>重要手册：</span>w3school文档</a>
    </div>
    <h1>后端的技术栈包括：</h1>
    <p><span>springboot</span> <span>mybatis</span></p>
    <hr>
    <div>接下来写一个表单提交用例信息
        <form method="post" action="index.html">
            <input type="text" placeholder="请输入用例名" name="caseName">
            <input type="password" placeholder="请输入密码" name="password">
            <!--        单选框， 需要name是一致的，才能产生互斥-->
            <div>
                请选择用例类型：
                <!--            label元素可以让其中的文本也具备input元素的选择功能，可以使用for属性来进行标记-->
                <label><input type="radio" name="用例类型" value="web自动化"> web自动化</label>
                <label><input type="radio" name="用例类型" value="接口自动化"> 接口自动化</label>
                <label><input type="radio" name="第二个选项" value="安全测试"> 安全测试</label>
            </div>
            <!--        多选框，可以把多个信息提交给后端当做数组处理-->
            <div>
                请选择要执行的节点：
                <label><input type="checkbox" name="执行节点" value="服务器">服务器</label>
                <label><input type="checkbox" name="执行节点" value="本机节点">本机节点</label>
                <label><input type="checkbox" name="执行节点" value="云节点">云节点</label>
            </div>
            <div>
                请拖动选择你需要的执行次数：
                <input type="range" min="0" max="100" step="2" name="次数">
            </div>
            <div>
                请选择关键字：
                <select name="keywords">
                    <option value="open">open</option>
                    <option value="close">close</option>
                    <option value="get">get</option>
                    <option value="post">post</option>
                </select>
            </div>

            <!--        提交按钮-->
            <input type="submit" value="确认提交">
        </form>
    </div>

    <hr>
    <p>
    <h3>测试用例显示</h3>
<!--    表格-->
    <table border="2" bgcolor="#add8e6" align="center" width="500px">
        <thead>
        <tr>
            <th>用例名</th>
            <th>步骤名</th>
            <th>关键字</th>
            <th>参数1</th>
            <th>参数2</th>
        </tr>
        </thead>
        <tbody>
<!--        ${}是要传递给templates模板的变量名-->
        <tr th:each="sunnyCase:${sunnyCases}">
<!--            替换td中的内容为th:text后的值-->
            <td th:text="${sunnyCase.caseName}">请求auth</td>
            <td th:text="${sunnyCase.stepName}">发送post</td>
            <td th:text="${sunnyCase.keywords}">post</td>
            <td th:text="${sunnyCase.param1}">auth</td>
            <td th:text="${sunnyCase.param2}">token</td>
        </tr>
        </tbody>
    </table>
    </p>

    <hr>
    <div>接下来通过iframe展示一些列表
        <iframe src="list.html" width="100%" height="100%" frameborder="0"></iframe>
    </div>

</main>

<footer> 底部信息元素</footer>
</body>

</html>